import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Input} from 'antd';

import { FormComponentProps } from '@ant-design/compatible/es/form';
import React from 'react';
import styles from '../styles.less';

interface TextCountInputProps extends FormComponentProps {
  value?: any;
  beforeTxt?: string;
  afterTxt?: string;
  onChange?: (value:any) => void;
}

const TextCountInput: React.FC<TextCountInputProps> = props => {
  const { value, beforeTxt, afterTxt } = props;

  const handleChange = (e:any) =>{
    triggerChange(e.target.value)
  }

  const triggerChange = (changedValue:any)=> {
    const { onChange } = props;
    if (onChange) {
      onChange(changedValue);
    }
  };

  return (
    <div className={styles.rowDiv}>
      {beforeTxt}<Input value={value} onChange={(val) => handleChange(val)}/>{afterTxt}
    </div>
  );
};

export default Form.create<TextCountInputProps>()(TextCountInput);
